<template>
	<view class="footer-nav-wrapper">
		<navigator url="/pages/index/index" class="footer-nav-single">
			<view class="menu-wrapper">
				<image src="../../static/tab-home.png" mode="widthFix" class="injectable" alt=""></image>
				<text>首页</text>
				<view v-show="activeUrl==='pages/index/index'">·</view>
			</view>
		</navigator>
		<navigator url="/pages/category/category" class="footer-nav-single">
			<view class="menu-wrapper">
				<image src="../../static/tab-cate.png" mode="widthFix" class="injectable" alt=""></image>
				<text>分类</text>
				<view v-show="activeUrl==='pages/category/category'">·</view>
			</view>
		</navigator>
		<navigator url="/pages/cart/cart" class="footer-nav-single">
			<view class="menu-wrapper">
				<image src="../../static/tab-cart.png" mode="widthFix" class="injectable" alt=""></image>
				<text>购物车</text>
				<!-- <view>·</view> -->
			</view>
		</navigator>
		<navigator url="/pages/user/user" class="footer-nav-single">
			<view class="menu-wrapper">
				<image src="../../static/tab-my.png" mode="widthFix" class="injectable" alt=""></image>
				<text>我的</text>
				<view v-show="activeUrl==='pages/user/user'">·</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeUrl: ''
			};
		},
		activated() {
			this.activeUrl = this.$route.meta.pagePath
		}
	}
</script>

<style lang="css">
	.footer-nav-wrapper {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
		padding: 0 80upx;
		border-radius: 120upx;
		background-color: #FFFFFF;
		-webkit-box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.16);
		box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.16);
	}

	.footer-nav-single {
		position: relative;
		display: block;
		width: 160upx;
		height: 120upx;
		text-align: center;
		border-radius: 50%;
	}

	.footer-nav-single .menu-wrapper text {
		display: block;
		width: 150upx;
		font-size: 24upx;
		color: #6E6E6E;
	}

	.footer-nav-single image {
		width: 40upx;
		height: 40upx;
		display: block;
		margin: 0 auto;
		margin-bottom: 8upx;
	}

	.footer-nav-single .menu-wrapper {
		line-height: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	.footer-nav-single .menu-wrapper view {
		font-size: 36upx;
		height: 10upx;
		margin-top: -14upx;
		color: rgb(203, 87, 60);
	}

	.footer-nav-single:before {
		position: absolute;
		z-index: -1;
		top: -10upx;
		left: -10upx;
		visibility: hidden;
		width: calc(100% + 20upx);
		height: calc(100% + 20upx);
		content: "";
		opacity: 0;
		border-radius: 50%;
		background-color: #FFFFFF;
	}

	.footer-nav-single:hover,
	.footer-nav-single.active {
		border-radius: 50%;
		/* background-color: #4A44F2; */
	}

	.footer-nav-single:hover text,
	.footer-nav-single.active text {
		/* color: #FFFFFF; */
	}

	.footer-nav-single:hover image *,
	.footer-nav-single.active image * {
		/* stroke: #4A44F2; */
	}

	.footer-nav-single:hover:before,
	.footer-nav-single.active:before {
		visibility: visible;
		opacity: 1;
	}
</style>
